<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <body>

        <h3>v-model</h3>

        <div id="root">
            <p> picked: {{ picked }}</p>
            <!-- v-bind:checked="picked" -->
            <input type="radio" :checked="picked">
            <hr>
            <!-- v-bind:checked="picked" -->
            <input type="checkbox" :checked="picked">
            <hr>
            <select>
                <option>河西省</option>
                <option>江北省</option>
                <option :selected="picked">广南省</option>
            </select>

            <hr>
            性别:
            <input type="radio" v-model="gender" value="male" id="liangzai">
            <label for="liangzai">靓仔</label>
            <input type="radio" v-model="gender" value="female" id="liangmei">
            <label for="liangmei">靓妹</label>
            <p>gender: {{ gender }}</p>

            <hr>
            爱好:
            <input type="checkbox" v-model="hobby" value="html" id="html">
            <label for="html">HTML</label>
            <input type="checkbox" v-model="hobby" value="css" id="css">
            <label for="css">CSS</label>
            <input type="checkbox" v-model="hobby" value="javascript" id="js">
            <label for="js">javascript</label>
            <p>hobby: {{ hobby }}</p>

            <hr>
            省份:
            <select v-model="province">
                <option v-for="p in provinces" 
                        v-bind:value="p.value" 
                        v-bind:key="p.id">
                    {{ p.name }}
                </option>
            </select>
            <p>province: {{ province }}</p>


        </div>
    
        <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            const options = {
                data(){
                    return {
                        gender: 'female',
                        hobby: [ 'css' ],
                        province: 'jiangbei',
                        provinces: [
                            { id: 111 , name: '广北省' , value: 'guangbei' },
                            { id: 123 , name: '江北省' , value: 'jiangbei' },
                            { id: 456 , name: '江南省' , value: 'jiangnan' },
                            { id: 789 , name: '广南省' , value: 'guangnan' }
                        ]
                    }
                },
                computed: {
                    picked(){
                        return Math.random() > 0.5 ;
                    }
                }
            }
            Vue.createApp(options).mount('#root');
        </script>
        
    </body>
</html>